<template>
  <view>
    <view
      v-if="hasShow"
      :style="{
        background: backgroundColor,
        borderRadius: radius,
        border: `${borderWidth} solid #5690DA;`,
      }"
      class="tui-dialog"
      @tap.stop="stopEvent"
    >
      <view class="tui-dialog__hd">
        <view :style="{ color: titleColor }" class="tui-dialog__title">
          {{ title }}
          <slot name="title"></slot>
        </view>
      </view>
      <view :style="{ color: contentColor }" class="tui-dialog__bd">
        <slot name="content"></slot>
      </view>
      <view v-if="buttons && buttons.length"class="tui-dialog__ft">
        <block v-if="buttons && buttons.length">
          <view
            v-for="(item, index) in buttons"
            :key="index"
            :data-index="index"
            :style="{ color: item.color || '#333' }"
            class="tui-dialog__btn"
            @tap="buttonTap"
          >
            {{ item.text }}
          </view>
        </block>
      </view>
      <slot name="footer"></slot>
    </view>
    <view
      v-if="mask"
      :class="{ 'tui-mask_hidden': !hasShow }"
      class="tui-dialog__mask"
      @tap="close"
    ></view>
  </view>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: 'tuiDialog',
  emits: ['click', 'close'],
  props: {
    title: {
      type: String,
      default: '',
    },
    borderWidth: {
      type: String,
      default: '0rpx',
    },
    maskClosable: {
      type: Boolean,
      default: true,
    },
    mask: {
      type: Boolean,
      default: true,
    },
    show: {
      type: Boolean,
      default: false,
    },
    isUpdate: {
      type: Boolean,
      default: false,
    },
    isNotTimer: {
      type: Boolean,
      default: false,
    },
    buttons: {
      type: Array,
      default() {
        return [];
      },
    },
    backgroundColor: {
      type: String,
      default: '#ffffff',
    },
    radius: {
      type: String,
      default: '12rpx',
    },
    titleColor: {
      type: String,
      default: '#131313',
    },
    contentColor: {
      type: String,
      default: '#999999',
    },
  },
  data() {
    return {
      visual: false
    }
  },
  computed:{
    ...mapState({
      update: (state) => state.system.update,
      visuals: (state) => state.system.visual,
    }),
    hasShow(){
      if (this.isUpdate){
        return  this.show
      }
      if (this.isNotTimer){
        return this.visuals.notTimer && this.show
      }
      return !this.update.show && this.show
    }
  },
  mounted() {
    // console.log(this.$slots, this.$scopedSlots)
  },
  methods: {
    buttonTap(e) {
      const { index } = e.currentTarget.dataset;
      this.$emit('click', {
        index,
        item: this.buttons[index],
      });
    },

    close() {
      if (!this.maskClosable) return;
      this.$emit('close', {});
    },

    stopEvent() {},
  },
};
</script>

<style>
.tui-dialog {
  position: fixed;
  z-index: 100000;
  top: 50%;
  left: 80rpx;
  right: 80rpx;
  transform: translateY(-50%);
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 90%;
}

.tui-dialog__hd {
  padding: 38rpx 24rpx 32rpx;
}

.tui-dialog__title {
  font-weight: 700;
  font-size: 40rpx;
  line-height: 63rpx;
}

.tui-dialog__bd {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 64rpx 40rpx;
  margin-bottom: 0;
  font-size: 28rpx;
  line-height: 44rpx;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.tui-dialog__ft {
  display: flex;
  position: relative;
  line-height: 78rpx;
  min-height: 78rpx;
  font-size: 28rpx;
}

.tui-dialog__ft:after {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  transform-origin: 0 0;
  transform: scaleY(0.5);
}

.tui-dialog__btn {
  display: block;
  flex: 1;
  font-weight: 400;
  font-size: 32rpx;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: relative;
}

.tui-dialog__btn:active {
  opacity: 0.6;
}

.tui-dialog__btn:first-child::after {
  width: 0;
  border-left: 0;
}

.tui-dialog__btn::after {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  transform-origin: 0 0;
  transform: scaleX(0.5);
}

.tui-dialog__mask.tui-mask_hidden {
  opacity: 0;
  transform: scale3d(1, 1, 0);
}

.tui-dialog__mask {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 1;
  transform: scale3d(1, 1, 1);
  transition: all 0.2s ease-in;
}
</style>
